import { Form, Input, Button, Checkbox } from 'antd'

const Login = () => {
  const onFinish = (values) => {
    console.log('Success:', values)
  }

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }

  return (
    <div style={{transform: 'translateY(50%)'}}>
      <Form name="basic"
        labelCol={{ span: 8, }}
        wrapperCol={{ span: 8, }}
        initialValues={{  remember: true, }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off" >
        <Form.Item label="用户名" name="username"
          rules={[ {
            required: true,
            message: '请输入用户名！', }, ]} >
          <Input />
        </Form.Item>

        <Form.Item label="密 码" name="password"
          rules={[
            {
              required: true,
              message: '请输入密码！',
            },
          ]} >
          <Input.Password />
        </Form.Item>

        <Form.Item name="remember" valuePropName="checked"
          wrapperCol={{
            offset: 8,
            span: 8,
          }} >
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 8,
          }} >
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Login